<template>
  <u-popup v-model="cardShow" mode="bottom" @close='close'>
    <view class="diy-card">

      <view class="top">
        <view class="t-left">
          <image :src="$util.img(config.icon)" mode="aspectFill"></image>
          <view class="tl-box">
            <view class="title">{{ config.title }}</view>
            <view class="btntips">单次购买{{ config.num }}张</view>
          </view>
        </view>
        <view class="t-right">￥{{ config.price }}元/张</view>
      </view>

      <view class="d-info">
        <view class="di-item">
          <image :src="$util.img('/static/img/card/金币.png')" mode="heightFix"></image>
          <view class="d-right">
            <view class="txt">{{ $store.state.jb }}</view>
            <view class="txt">x{{ config.medals * num }}</view>
          </view>
        </view>
        <view class="di-item">
          <image :src="$util.img('/static/img/card/PNG2.png')" mode="heightFix"></image>
          <view class="d-right">
            <view class="txt">极客闪卡</view>
            <view class="txt">x{{ num }}</view>
          </view>
        </view>
      </view>

      <view class="center">
        <view class="left">
          <u-button class="btn-btn" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true"
            @click="num > 1 ? num-- : ''">-</u-button>
          <view class="num">{{ num }}</view>
          <u-button class="btn-btn" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true" @click="add">+</u-button>
        </view>
        <view class="right">最大{{ config.num }}张</view>
      </view>

      <u-button @click="btn" class="btn-pay-die" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">立即购买</u-button>

    </view>
  </u-popup>
</template>

<script>

export default {
  props: {
    show: {
      type: [String, Boolean],
      default: false
    },
    config: {
      type: [Object],
      default: {}
    },
  },
  watch: {
    show: {
      handler(newval, oldVal) {
        this.cardShow = this.show;
      },
      immediate: true
    }
  },
  data() {
    return {
      cardShow: false,
      num: 1,

    }
  },
  methods: {
    // 弹窗关闭
    close() {
      this.$emit('close')
    },
    // 数量增加
    add(config) {
      if (this.config.num > this.num) {
        this.num++
      } else this.$util.taost({ title: '已经到最大数量了~' })
    },
    // 立即购买
    btn() {
      let obj = {
        num: this.num,
        type: 2
      };
      if (this.config.type == '1') {
        this.$util.redirectTo('/pages/tidalcard/tidalcardCreateOrder', { id: this.config.card_id, pay_num: this.num })
      } else {
        this.$http.asyncSendrequest({
          url: '/order/buyHandle',
          data: {
            ...obj
          },
          success: res => {
            if (res.code == '0') {
              this.$emit('setShow', res.data)
            }

          }
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.diy-card {
  width: 100%;
  min-height: 562rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0px 0px;
  padding: 55rpx 30rpx 45rpx;
  box-sizing: border-box;
  z-index: 9999999;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .t-left {
      display: flex;
      align-items: center;

      image {
        width: 180rpx;
        height: 180rpx;
        background: #F8F8F8;
        border-radius: 23rpx;
        margin-right: 32rpx;
      }

      .tl-box {
        .title {
          font-size: 38rpx;
          font-family: PingFang SC;
          font-weight: 800;
          color: #000000;
        }

        .btn-pay {
          height: 40rpx;
          background: #292929;
          border-radius: 6rpx;
          text-align: center;
          font-size: 24rpx;
          font-family: PingFang SC;
          color: #FFFFFF;
          margin-top: 20rpx;
        }

        .btntips {
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, .4);
          color: #FFFFFF;
          font-size: 26rpx;
          height: 40rpx;
          margin-top: 20rpx;
        }
      }
    }

    .t-right {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
  }

  .d-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .di-item {
      width: 49%;
      height: 140rpx;
      border-radius: 10rpx;
      background: var(--bg-project);
      display: flex;
      align-items: center;
      padding: 0 30rpx;

      image {
        height: 70rpx;
      }

      .d-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        margin-left: 30rpx;

        .txt {
          font-size: 28rpx;
          text-align: left;
          width: 100%;
        }

        .txt:last-child {
          margin-top: 10rpx;
          width: 100%;
        }
      }

    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .btn-btn {
        height: 60rpx;
        background: #292929;
        border-radius: 6rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        color: #FFFFFF;
      }

      .num {
        margin: 0 42rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #292929;
      }
    }

    .right {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
  }

  .btn-pay-die {
    height: 80rpx;
    background: #292929;
    border-radius: 10rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    color: #FFFFFF;
    margin-top: 94rpx;

  }
}
</style>